<script setup>
import * as THREE from 'three';
import { onMounted, onUnmounted, ref,reactive } from 'vue';
import { Box3, BoxHelper, PlaneHelper, Plane, AxesHelper } from 'three';
import {inverseKinematics} from "@/lib/inverse/kinematicsInverse.js";

const container = ref(null);
const matrix4 = ref(null);

const mathProps = reactive({
  position: new THREE.Vector3(0, 0, 0),
  quaternion: new THREE.Quaternion(0, 0, 0, 1),
  scale: new THREE.Vector3(1, 1, 1),
  euler: new THREE.Euler(0, 0, 0, 'XYZ'),
  vec4: new THREE.Matrix4(0,-1,0,0,0,0,-1,0,1,0,0,0,0,0,0,1)

});
const { position, quaternion, scale ,euler,vec4} = mathProps;



console.log("mat4",vec4);
vec4.decompose(position, quaternion, scale);
euler.setFromRotationMatrix(vec4);

onMounted(() => {

});

onUnmounted(() => {

});
</script>

<template>
  <div ref="container">
    <div ref="matrix4">
     <ul>
      <li>position: {{ position }}</li>
      <li>四元数：{{ quaternion }}</li>
      <li>缩放：{{ scale }}</li>
      <li>欧拉角：{{ euler }}</li>
      <li>旋转度数：{{ euler.z*180/Math.PI }}</li>
     </ul>

    </div>
  </div>


</template>

<style scoped>
  div {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    /* overflow: hidden; */
  }
</style>
